<template>
    <div class="flexWrap">
        <div class="flexWrap">
            <el-form ref="form" :model="form" size="small" :rules="rules" label-width="100px">
                <el-form-item prop="name" required label="姓名" >
                    <el-input v-model="form.name" placeholder="请输入" class="w-px400" />
                </el-form-item>
                <el-form-item prop="account" required label="登录名" >
                    <el-input v-model="form.account" placeholder="请输入" class="w-px400" />
                </el-form-item>
                <el-form-item :required="!form.id" prop="password" label="密码" >
                    <el-input v-model="form.password" :placeholder="!form.id ? '请输入密码' : '空则表示保持原密码不变'" class="w-px400" />
                </el-form-item>

                <el-form-item required prop="roles" label="角色">
                    <el-select class="w-px400" size="small"
                               multiple v-model="form.roles"
                               placeholder="请选择">
                        <el-option v-for="u in roleAry" :key=u.id :label=u.name :value=u.id />
                    </el-select>
                </el-form-item>
                <el-form-item required prop="status" label="状态">
                    <el-select clearable v-model="form.status" placeholder="请选择" class="w-px400">
                        <el-option
                            v-for="item in statusAry"
                            :key="item.v" :label="item.n" :value="item.v">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </div>
        <div class="flexWrapCenter w-per100 mt-30">
            <el-button @click="toClose">取 消</el-button>
            <el-button type="primary" @click="toSubmit">保 存</el-button>
        </div>
    </div>
</template>
<script>
import md5 from "@/utils/md5";
export default {
    name: "user-edit",
    props: {
        info: {
            type: Object
        },
        complete: {
            type:Function
        }
    },
    data() {
        return {
            statusAry: [{n:'正常',v:1},{n:'禁止',v:-1}],
            roleAry:[
                {id:1, name:"管理员"},
                {id:2, name:"经理"},
                {id:3, name:"产品"},
                {id:4, name:"开发"},
                {id:5, name:"测试"},
                {id:6, name:"协作者"},
            ],

            form: { id: '', name:"", },

            rules: {
                name:[
                    { required: true, message: '姓名不能空' },
                ],
                account:[
                    { required: true, message: '登录名不能空' },
                ],
                roles:[
                    { required: true, message: '角色不能空' },
                ],
            },
        };
    },
    components: {

    },
    created() {
        this.form = this.info
    },
    methods: {
        toClose() {
            this.$emit("complete");
        },

        toSubmit() {
            if (this.form.id && this.form.password && this.form.password.length < 5) {
                this.$message.error("密码不能小于5位~")
                return
            }

            let params = {...this.form}

            if (params.id) {
                if (params.password) {
                    params.password = md5.hex_md5("hjk0tpk*#en#&" + params.password)
                }
            } else {
                params.password = md5.hex_md5("hjk0tpk*#en#&" + params.password);
            }

            let roles = ""
            for (let i = 0; i < params.roles.length; i++) {
                roles += params.roles[i] + ","
            }
            params.roles = roles

            this.request.post({
                url: "user.save", data: params
            }).then(res => {
                this.$message.success({message:"保存成功！", duration:1000});
                setTimeout(() => {
                    this.$emit("complete");
                    this.form = {}
                }, 1000)
            },res => {
                this.$message.error(res.msg || "保存失败~");
            })
        },
    },
};
</script>
<style scoped lang="scss">

</style>
